<template>
    <div class="profile-container">
      <div class="card">
        <div class="background-image">
          <img src="@/assets/bac/Login-bac.jpg" alt="Background" />
          <div class="profile-avatar">
            <img :src="user.avatarUrl" alt="User Avatar" />
          </div>
        </div>
        <div class="uc-box">
          <MenuComponent :menuItems="menuItems" @itemSelected="handleMenuSelect" />
          <div class="content-area">
            <MainContent
              v-if="currentView === 'Profile'"
              :userInfo="userInfo"
            />
            <MainContent
              v-if="currentView === 'Password'"
              :passwords="passwords"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { userInfoService } from '@/api/user'; // 导入API接口
  import MenuComponent from '@/components/Profile/MenuComponent.vue';
  import MainContent from '@/components/Profile/MainContent.vue';
  
  export default {
    components: {
      MenuComponent,
      MainContent,
    },
    data() {
      return {
        user: {
          avatarUrl: 'https://example.com/path/to/avatar.jpg', // 默认头像
        },
        menuItems: ['Profile', 'Password', 'Settings', 'Notifications', 'Logout'],
        userInfo: null,
        currentView: 'Profile', // 默认展示个人资料
        passwords: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        },
      };
    },
    mounted() {
      this.fetchUserInfo();
    },
    methods: {
      async fetchUserInfo() {
        try {
          const response = await userInfoService();
          this.userInfo = response.data; 
          console.log('User info:', this.userInfo);
        } catch (error) {
          console.error('Error fetching user info:', error);
        }
      },
      handleMenuSelect(menuItem) {
        console.log('Selected menu item:', menuItem);
        this.currentView = menuItem; // 更新当前视图
      },
    },
  };
  </script>
  
  <style scoped>
  .profile-container {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  
  .card {
    width: 70%; /* 占据视图的70% */
    border-radius: 15px;
    overflow: hidden; /* 使圆角效果生效 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .background-image {
    position: relative;
    height: 200px;
    overflow: hidden;
  }
  
  .background-image img {
    width: 100%;
    height: auto; 
  }
  
  .profile-avatar {
    position: absolute;
    bottom: -50px; /* 头像出现的高度 */
    left: 50%;
    transform: translateX(-50%);
  }
  
  .profile-avatar img {
    width: 100px; /* 头像大小 */
    height: 100px;
    border-radius: 50%; /* 圆形头像 */
    border: 4px solid white; /* 白色边框 */
  }
  
  .uc-box {
    display: flex;
  }
  
  .content-area {
    flex: 3; /* 支持动态调整 */
    padding: 20px;
  }
  </style>
  